<template>
  <div>
    <div class="container pt-5">
      <div class="row p-4 color-333">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">学校环境</div>
          <div class="fs-30">SCHOOL ENVIRONMENT</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="row img-box mb-5">
        <div class="col-md-4 col-sm-6 mb-4" v-for="(item, i) in imgList" :key="i">
          <img :src="item" class="img-responsive w-100" alt />
        </div>
      </div>
      <div class="row p-4 color-333">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">教学设施</div>
          <div class="fs-30">TEACHING FACILITIES</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="row img-box mb-5">
        <div class="col-md-4 col-sm-6 mb-4" v-for="(item, i) in facilities" :key="i">
          <img :src="item" class="img-responsive w-100" alt />
        </div>
      </div>
      <div class="row p-4 color-333">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">生活环境</div>
          <div class="fs-30">ENVIRONMENT</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="row img-box mb-5">
        <div class="col-md-4 col-sm-6 mb-4" v-for="(item, i) in studentsList" :key="i">
          <img :src="item" class="img-responsive w-100" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        require("../assets/images/huanjing1.jpg"),
        require("../assets/images/huanjing2.jpg"),
        require("../assets/images/huanjing3.jpg"),
      ],
      facilities: [
        require("../assets/images/sheshi1.jpg"),
        require("../assets/images/sheshi2.jpg"),
        require("../assets/images/sheshi3.jpg"),
        require("../assets/images/sheshi4.jpg"),
        require("../assets/images/sheshi5.jpg"),
        require("../assets/images/sheshi6.jpg"),
      ],
      studentsList: [
        require("../assets/images/shenghuo1.jpg"),
        require("../assets/images/shenghuo2.jpg"),
        require("../assets/images/shenghuo3.jpg"),
      ]
    };
  }
};
</script>

<style lang="scss">
@media screen and (max-width: 768px) {
  .img-box {
    .col-md-6 {
      width: 50% !important;
    }
  }
}
.img-box {
  .col-md-4 {
    overflow: hidden;
    img {
      &:hover {
        transform: scale(1.5);
        transition: all 0.7s;
      }
    }
  }
}
</style>